<template>
<div id="background">
    <el-container>
        <el-header id="editGenderHeadPosition">
        
                <el-row type="flex" style="height:80%;display:flex;align-items: flex-end">
                       <el-col :xs="2" :sm="2" :md="2" :offset="1" class="imgCol">
                        <img v-bind:src="backIcon" class="backSize" @click="back"/>
                    </el-col>
                    <el-col :xs="6" :sm="6" :md="6" :offset="6" class="imgCol"> 
                        <span class="titleSize">编辑性别</span>
                    </el-col>
                    <el-col :xs="3" :sm="6" :md="6" :offset="5" class="imgCol">
                        <span class="titleSize" @click="editSex">保存</span>
                    </el-col>
                </el-row>
        </el-header>
        <el-main id="editGenderMainPosition" >
            <div  class="rowHeight "> 
                <el-row type="flex"  style="padding-top:5%">
                    <el-col :xs="8" :sm="8" :md="8" :offset="2"><span class="genderWords">性别：</span></el-col>
                    <el-col :xs="12" :sm="12" :md="12">
                        <el-radio v-model="gender" label="1" class="editGender"><span class="genderWords">男</span></el-radio>
                    </el-col>
                    <el-col >
                        <el-radio v-model="gender" label="0" class="editGender"><span class="genderWords">女</span></el-radio>
                    </el-col>
                      <!-- <el-col :xs="3" :sm="3" :md="3"  :offset="2"  class='imgCol'>
                        <span class="words">昵称</span>
                    </el-col>
                    <el-col :xs="19" :sm="19" :md="19"  class='imgCol'>
                        <el-input class="editInput"  v-model="nickname" clearable></el-input>
                    </el-col> -->
                </el-row>
            </div>
            <el-row type="flex" class="imgCol" >
                  <el-alert title="性别仅可编辑一次,编辑后不能更改" type="warning" show-icon :closable="false" style="width:90%"></el-alert>
            </el-row>
        </el-main>
    </el-container>
</div>    
</template>
<script>
import backIcon from '../../assets/img/mine/geRenZhongXin/back.png'
import { Toast } from 'vant';
export default {
    data(){
        return{
            gender:'0',
            sex:'',
            backIcon:backIcon,
            normalHeight:document.documentElement.clientHeight,
            nickname:''
        }
    },
    mounted(){
    //     var bg = document.getElementById("background");
    //    // normalHeight=document.documentElement.clientHeight;
    //     console.log("height:"+normalHeight);
    //     bg.style.height = normalHeight+"px";
    //     bg.style.backgroundColor = "#FFFFFF"
    //     bg.style.margin = "0px";
        var normalHeight=sessionStorage.getItem('normalHeight');

        var head=document.getElementById("editGenderHeadPosition");
        var headHeight=normalHeight/30 *4 ;
        console.log("headHeight:"+headHeight);
        head.style.height=headHeight+"px";

        var main=document.getElementById("editGenderMainPosition");
        var mainHeight=normalHeight/30 *26;
        console.log("mainHeight:"+mainHeight);
        main.style.height=mainHeight+"px";


        var sex=this.$route.query.sex;
        this.sex=sex;
        console.log(this.sex);
        if(this.sex==false){
            this.gender='0';
        }else{
            this.gender='1';
        }
    },
    methods:{
        back(){
            console.log("back:");
            this.$router.go(-1);
        },
        //编辑性别
        editSex(){
            if(this.gender==0){
                this.sex=false;
            }else{
                this.sex=true;
            }
            var URL=this.IP.IP+'/user/userInfo';
            console.log(URL);
            console.log(this.sex);
            this.$ajax({
                method:'post',
                url:URL,
                params:{
                    sex:this.sex
                },
            }).then(response=>{
                console.log(response.data);
                var code=response.data.code;
                if(code==0){
                    
                    Toast({
                        message:response.data.data,
                        duration:1000
                    })
                     setTimeout(()=>{
                        this.back();
                    },500)
                    
                }else{
                    // Toast(response.data.msg);
                    Toast({
                        message:response.data.msg,
                        duration:1000
                    })
            
                }
            }).catch(error=>{
                console.log(error);
                //Toast(error);
            })
        }
    }
}
</script>
<style>
.rowHeight{
    height:10%;
    background-color: #ffffff;
    /* border: 1px solid #000000; */
    /* margin-top: 10px; */

}
#editGenderHeadPosition{
    background-color: #53cdf5;
}
/* .editInput .el-input__inner {
    border: none;
    border-bottom: 1px solid #F0F0F0;
} */
.genderWords{
    color: #707070;
    /* font-size: 14px; */
}
.editGender .el-radio__input.is-checked .el-radio__inner {
    border-color: #53cdf5;
    background: #53cdf5;
}
.el-main {
    padding: 0px ;
}
.imgCol{
    display: flex;
    justify-content: center;
    align-items: center;
}
.backSize{
    height: 26px;
}
.titleSize{
    font-size:1.125em;
    color:#ffffff
}
@media screen and (max-height: 600px){
  .backSize{
      height: 22px;
  }
  .titleSize{
      font-size: 1em;
  }
}

</style>
